﻿<template>
    <div>
        <div class="big_box">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>车辆管理</el-breadcrumb-item>
                <el-breadcrumb-item>车辆列表</el-breadcrumb-item>
            </el-breadcrumb>
            <el-divider></el-divider>
            <el-form class="demo-form-inline" :model="Sel" label-width="140px">
                <el-row :gutter="24" class="row-bg">
                    <el-col :span="3">
                        <el-select v-model="Sel.Id" filterable required placeholder="请选择哪辆汽车">
                            <el-option value="0" label="请选择哪辆汽车">请选择哪辆汽车</el-option>
                            <el-option v-for="(v,k) in AllVehicle" :value="v.Id" :data-userid="v.Id" :label="v.CareName" v-text="v.CareName" />
                        </el-select>
                    </el-col>
                    <el-col :span="3">
                        <el-date-picker type="date"
                                        v-model="Sel.Start"
                                        placeholder="开始时间">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="3">
                        <el-date-picker type="date"
                                        v-model="Sel.End"
                                        placeholder="结束时间">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="1">
                        <el-button icon="el-icon-search" @click="GettableDB()"></el-button>
                    </el-col>
                    <el-col :span="1">
                        <el-button class="buttongroup" type="success" icon="el-icon-circle-plus-outline" @click="AddVehicleManagement">添加</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <el-row style="padding-top: 10px">
                <el-col>
                    <el-table :data="tableData"
                              style="width: 100%"
                              ref="multipleTable"
                              @selection-change="selectionLineChangeHandle"
                              border>
                        <el-table-column header-align="center" type="selection" align="center"></el-table-column>
                        <el-table-column header-align="center" fixed type="index" label="序号" align="center" width="50" :index="_indexMethod"></el-table-column>
                        <el-table-column header-align="center" prop="CareName" label="汽车品牌" align="center" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column header-align="center" prop="DepartmentId" label="车辆类型" align="center" :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                {{VehicleTypeFc(scope.row)}}
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" prop="LicensePlate" label="车牌号" width="100" align="center"></el-table-column>
                        <el-table-column header-align="center" prop="CarModel" label="汽车型号" :show-overflow-tooltip="true" align="center">
                            <template slot-scope="scope">
                                <label v-if="scope.row.CarModel==null">未知</label>
                                <label v-else>{{scope.row.CarModel}}</label>
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" prop="HouseNumber" label="车驾号" :show-overflow-tooltip="true" align="center">
                            <template slot-scope="scope">
                                <label v-if="scope.row.HouseNumber==null">未知</label>
                                <label v-else>{{scope.row.HouseNumber}}</label>
                            </template>

                        </el-table-column>
                        <el-table-column header-align="center" prop="EngineNumber" label="发动机编号" :show-overflow-tooltip="true" align="center">
                            <template slot-scope="scope">
                                <label v-if="scope.row.EngineNumber==null">未知</label>
                                <label v-else>{{scope.row.EngineNumber}}</label>
                            </template>

                        </el-table-column>
                        <el-table-column header-align="center" prop="Price" label="购买金额(¥)" :show-overflow-tooltip="true" align="center">
                            <template slot-scope="scope">
                                <label v-if="scope.row.Price==0">未知</label>
                                <label v-else>{{scope.row.Price}}</label>
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" prop="Mileage" label="里程数(KM)" :show-overflow-tooltip="true" align="center">
                            <template slot-scope="scope">
                                <label v-if="scope.row.Mileage==null">未知</label>
                                <label v-else>{{scope.row.Mileage}}</label>
                            </template>

                        </el-table-column>
                        <el-table-column header-align="center" prop="PurchaseDate" label="购车日期" width="120" align="center">
                            <template slot-scope="scope">
                                <label v-if="scope.row.Mileage==null">未知</label>
                                <label v-else>{{fmtDate(scope.row.PurchaseDate)}}</label>
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" prop="CareInsurance" label="车辆保险" :show-overflow-tooltip="true" align="center">
                            <template slot-scope="scope">
                                <label v-if="scope.row.CareInsurance==null">未知</label>
                                <label v-else>{{scope.row.CareInsurance}}</label>
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" prop="InsurancePremium" label="保险费用" :show-overflow-tooltip="true" align="center">
                            <template slot-scope="scope">
                                <label v-if="scope.row.InsurancePremium==null">未知</label>
                                <label v-else>{{scope.row.InsurancePremium}}</label>
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" prop="InsuranceData" label="保险日期" width="120" align="center">
                            <template slot-scope="scope">
                                <label v-if="scope.row.InsuranceData==null||scope.row.InsuranceData == 'NaN'">未知</label>
                                <label v-else>{{fmtDate(scope.row.InsuranceData)}}</label>
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" prop="LicensePlate" label="保险电话" :show-overflow-tooltip="true" align="center">
                            <template slot-scope="scope">
                                <label v-if="scope.row.InsurancePhone==null">未知</label>
                                <label v-else>{{fmtDate(scope.row.InsurancePhone)}}</label>
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" prop="LicensePlate" label="车牌号" :show-overflow-tooltip="true" align="center">
                            <template slot-scope="scope">
                                <label>{{AnnualTimeFc(scope.row)}}</label>
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" prop="AnnualFeeCheck" label="年检费用" :show-overflow-tooltip="true" align="center">
                            <template slot-scope="scope">
                                <label v-if="scope.row.AnnualFeeCheck==0">未知</label>
                                <label v-else>{{ (scope.row.AnnualFeeCheck)}}</label>
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" prop="LicensePlate" label="车辆外借情况" width="120" :show-overflow-tooltip="true" align="center">

                            <template slot-scope="scope">
                                <label v-if="scope.row.RentId==1">暂未外借</label>
                                <label v-else>已外借</label>
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" prop="LicensePlate" label="车辆状态" :show-overflow-tooltip="true" align="center">
                            <template slot-scope="scope">
                                <label v-if="scope.row.State==1">好</label>
                                <label v-else-if="scope.row.State==2">良好</label>
                                <label v-else-if="scope.row.State==4">损坏</label>
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" prop="LicensePlate" label="汽车相册" :show-overflow-tooltip="true" align="center">
                            <template slot-scope="scope">
                                <el-button @click="GetImage(scope.row)" type="text" size="small">相册</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column header-align="center" prop="Note" label="备注" :show-overflow-tooltip="true" align="center">

                        </el-table-column>
                        <el-table-column header-align="center" prop="barDemo" label="操作" fixed="right" width="200" align="center">
                            <template slot-scope="scope">
                                <el-button type="primary" class="BtnSize" size="mini" plain @click="edit(scope.row)">编辑</el-button>
                                <el-button type="danger" class="BtnSize" size="mini" plain @click="Del(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
                <el-col :span="24">
                    <div class="block" style="float: right">
                        <el-pagination @size-change="GettableDB"
                                       @current-change="GettableDB"
                                       :current-page.sync="pagination.currentPage"
                                       :page-sizes="pagination.pagesizes"
                                       :page-size.sync="pagination.pagesize"
                                       layout="total, sizes, prev, pager, next, jumper"
                                       :total.sync="pagination.total">
                        </el-pagination>
                    </div>
                </el-col>
            </el-row>
        </div>

        <el-dialog :visible.sync="AddVehicleManagementShow" title="添加车辆信息" width="70%">
            <AddVehicleManagement></AddVehicleManagement>
        </el-dialog>

        <el-dialog :visible.sync="UpVehicleManagementShow" title="修改车辆信息" width="70%">
            <UpVehicleManagement :UpVehicleManagementDB="UpVehicleManagementDB"></UpVehicleManagement>
        </el-dialog>



        <el-image-viewer v-if="showViewer"
                         :on-close="()=>{showViewer=false}"
                         :url-list="imgArray" />




    </div>
</template>

<script>
    import * as publicjs from "/public/Scriput/Public"
    import AddVehicleManagement from "./AddVehicleManagement";
    import UpVehicleManagement from "./UpVehicleManagement";
    export default {
        name: "VehicleManagement",
        components: {
            AddVehicleManagement,
            UpVehicleManagement,
            'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
        },
        data() {
            return {
                showViewer: false,
                AddVehicleManagementShow: false,
                UpVehicleManagementShow: false,
                //所有汽车数据
                AllVehicle: [],
                //表格查询数据
                Sel: {
                    UserId: "0",
                    Id: "0",
                },
                Start: '',
                End: '',
                //表格数据
                tableData: [],
                //分页数据绑定
                pagination: {
                    currentPage: 1,
                    pagesizes: [10, 20, 30, 40, 50],
                    pagesize: 10,
                    total: 0
                },
                delidarray: [],

                UpVehicleManagementDB: {},
            }
        },
        created() {
            this.GettableDB();
            this.AllVehicle = publicjs.GetAllVehicle(this.$http);
        },
        methods: {
            _indexMethod(index) {
                return ((this.pagination.currentPage - 1) * this.pagination.pagesize) + index + 1
            },
            selectionLineChangeHandle(val) {
                this.delidarray = val;
            },
            VehicleTypeFc(d) {
                switch (d.VehicleType) {
                    case 1:
                        return "轿车";
                    case 2:
                        return "越野车";
                    case 3:
                        return "商务车";
                    case 4:
                        return "面包车";
                    case 5:
                        return "货车";
                    case 6:
                        return "工程用车";
                    default:
                        return "暂未选择";
                }
            },
            selectionLineChangeHandle() { },
            GettableDB() {

                const Loading = this.openLoading();
                this.$http.post("/VehicleManagement/GetVehicleDetail", {
                    vehicle: this.Sel,
                    Start: this.Start,
                    End: this.End,
                    offset: this.pagination.currentPage,
                    limit: this.pagination.pagesize
                }).then(res => {
                    console.log(res);
                    this.tableData = res.data.data;
                    this.pagination.total = res.data.count;
                    Loading.close();
                })
            },
            fmtDate(date) {
                if (date != null) {
                    return date.split(' ')[0]
                }
            },
            AnnualTimeFc(d) {
                if (d.AnnualTime == null || d.AnnualTime == "NaN") {
                    return "未知"
                } else {
                    var myDate = new Date();
                    var year = myDate.getFullYear();        //获取当前年
                    var month = myDate.getMonth() + 1;   //获取当前月
                    var date = myDate.getDate();
                    var timestamp = new Date(year - 1 + "/" + month + "/" + date).toLocaleDateString();
                    //注意上面生成的时间戳是13位，而DateToUnix方法中转换为了10位
                    var timestamp2 = new Date(this.fmtDate(d.AnnualTime)).toLocaleDateString();
                    if (timestamp2 < timestamp) {
                        return "未检修";
                    } else {
                        return "已检修";
                    }
                }
            },

            edit(obj) {
                this.UpVehicleManagementDB = JSON.parse(JSON.stringify(obj));
                this.UpVehicleManagementShow = true;
            },
            Del(obj) {
                console.log(obj);
                this.$confirm('你确定要删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'error'
                }).then(() => {
                    let loadding = this.openLoading();
                    this.$http.post('/VehicleManagement/VehicleDelete', { id: obj.Id }).then(x => {
                        loadding.close();
                        if (x.data.bit) {
                            this.$message.success(x.data.mes);
                            this.GettableDB();
                        } else {
                            this.$message.error(x.data.mes);
                        }
                    })
                })
            },
            AddVehicleManagement() {
                this.AddVehicleManagementShow = true;
            },
            async GetImage(obj) {
                this.GetImgPath("64,1," + obj.Id);
            },
            async GetImgPath(path) {
                this.imgArray = [];
                this.imgArray = await publicjs.GetAllFileByUrl(this.$http, path);
                console.log(this.imgArray)
                if (this.imgArray.length > 0) {
                    this.showViewer = true;
                } else {
                    this.$message.info("暂未上传图片");
                }

            },
        },
    }
</script>






<style scoped>
</style>